<template>
<div class="intorduce">
  <marquee style="padding-top:1rem;">
   <i style="font-size:13px;"> 亲爱的 <span class="el-icon-user"
    style="color: #409EFF;"> {{name}}</span>
    ,欢迎进入基于区块链的在线课程系统!</i>
    </marquee>
    <div class="nav">
        <span class="head_title "><span class="el-icon-edit"></span> 即时公告：</span>
         <span class="title">介绍:</span><p style="border-bottom: 1px dashed #409EFF;">
          本系统可以</p>
      <span class="title">功能:</span><div style="border-bottom: 1px dashed rgb(96, 235, 96);">
        <p>1.能够</p>
       <p> 2.能够</p>
      <p>  3.能实</p>
        <p>4.能方</p>
        </div>
       <span class="title">Ps:</span><p style="border-bottom: 1px dashed orange">
              基于区块链的在线课程系统</p>
    </div>
</div>
</template>
<script>
  export default {
    name:'intorduce',
    data () {
      return {
         name:"",
         sex:""
      };
    },
    created() {
       this.name=window.localStorage.getItem("name");
    },
  }
</script>
<style scoped>
.intorduce p{
    text-indent: 2em;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    padding: 8px 10px;
}
.head_title{
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-family:'Courier New', Courier, monospace!important;
}
.title{
    padding: 1rem 0;
    font-size: 17px;
    font-weight: bold;
    display: block;
    animation: flash 8s alternate infinite;
}
.title:nth-child(2){
    color: #409EFF;
}
.title:nth-child(4){
    color: rgb(96, 235, 96);
}
.title:nth-child(6){
    color:orange;
}
.nav{
    position: relative;
    top: 4rem;
    margin: 0 auto;
    max-width: 1000px;
    min-width: 500px;
    padding: 2rem 3rem;
    border-radius: 1rem;
    background-color: #fff;
}
@keyframes flash{
    0%{
      transform: rotateY(90deg);
    }
    25%{
      transform: rotateY(0deg);
    }
    50%{
      transform: rotateX(90deg);
    }
    75%{
      transform: rotateX(0deg);
    }
    100%{
      transform: rotateY(90deg);
    }
}
</style>